<template>
  <div>
    <template v-if="film == null">
      <xw-loading />
    </template>
    <template v-else>
      <!-- 顶层导航 -->
      <van-nav-bar :title="film.name" left-text="返回" left-arrow @click-left="onClickLeft" />
      <!-- 图片展示 -->
      <div class="poster">
        <img v-lazy="film.poster" />
      </div>
      <!-- 电影描述 -->
      <div class="film-detail">
        <div class="col">
          <div class="film-name">
            <span class="name">{{ film.name }}</span
            ><span class="item">2D</span>
          </div>
          <div class="film-grade">
            <span class="grade"></span>
          </div>
        </div>
        <div class="film-category grey-text">喜剧 | 剧情</div>
        <div class="film-premiere-time grey-text">2022-09-09上映</div>
        <div class="film-nation-runtime grey-text">中国大陆 | 111分钟</div>
        <div class="test grey-text">{{ film.synopsis | cntLen(50) }}</div>
      </div>
    </template>
  </div>
</template>

<script>
import { getFilmInfoApi } from '@/api/filmApi'
export default {
  props: {
    id: {
      type: String,
      default: 0
    }
  },
  data() {
    return {
      film: null
    }
  },
  async mounted() {
    this.film = await getFilmInfoApi(this.id)
  },
  methods: {
    onClickLeft() {
      // 回退
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
.poster {
  width: 100vw;
  height: 210px;
  overflow: hidden;
  position: relative;
  top: 0;
  img {
    width: 100%;
    position: absolute;
    top: -120px;
  }
}
.film-detail {
  padding: 15px;
  padding-top: 12px;
  background-color: #fff;
  font-size: 13px;
  color: #797d82;
  .film-name {
    font-size: 18px;
    color: #191a1b;
  }
}
</style>
